<template>
    <div class="page-container">
        <div
            class="item"
            draggable="true"
            @dragstart="dragstart($event, item)"
            @dragend="dragend"
            v-for="(item, index) in items"
            :key="index"
        >
            {{ item.label }}
        </div>

        <div class="drop-field" @drop="drop" @dragover.prevent="dragover">
            <div class="item" v-if="droppedItem !== ''">
                {{ droppedItem }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            droppedItem: "",
            items: [
                { id: 1, label: "模块1" },
                { id: 2, label: "模块2" },
                { id: 3, label: "模块3" },
                { id: 4, label: "模块4" },
            ],
        };
    },
    methods: {
        /**
         * @dragstart：拖拽开始事件，可绑定于被拖拽元素上；
            @dragend：拖拽结束事件，可绑定于被拖拽元素上；
            @dragover：拖拽持续移动事件，建议绑定于可拖放区域；
            @dragenter：进入拖放区域，建议绑定于可拖放区域，该事件仅在进入拖放区域时触发，
            在其内部移动时不触发，离开某一可拖放区域后再进入时会再次触发；
         * */

        drop(event) {
            // 在拖放区的 drop 事件中获取消息
            this.droppedItem = event.dataTransfer.getData("item");
        },
        dragstart(event, item) {
            // 在被拖拽对象的 dropstart 事件中传递数据（只能是字符串）
            event.dataTransfer.setData("item", item.label);
        },
        dragend(event) {
            // 在被拖拽对象的 dragend 事件中清除消息
            event.dataTransfer.clearData();
        },
        dragover(event) {
            event.preventDefault();
            console.log('dragover', event);
        },
    },
};
</script>

<style scoped>
.drag-field,
.drop-field {
    height: 10rem;
    box-sizing: border-box;
    padding: 1rem;
    background-color: #eee;
    margin-top: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.item {
    width: 30%;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    font-size: 0.9rem;
    background-color: royalblue;
    color: #eee;
}
.item:hover {
    cursor: pointer;
}
</style>
